<template>
    <div style="padding:10px 15px;">
        <my-table :data="resultList" height="650">
            <el-table-column label="业绩名称" min-width="200">
                <template slot-scope="scope">
                    <template>
                        <div
                            style="color:#409EFF;cursor:pointer;"
                            @click.stop="
                                toYejiInfo(scope.row.businessId)
                            "
                        >
                            {{ scope.row.proName  ? scope.row.proName : '无' }}
                        </div>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                label="建设单位"
                prop="buildCompany"
                min-width="200"
            ></el-table-column>
            <el-table-column
                label="项目类别"
                prop="proType"
                width="200"
            ></el-table-column>
            <el-table-column
                label="项目编号"
                prop="proNum"
            ></el-table-column>
        </my-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            style="text-align:right; margin-top:1em;"
            :total="total">
        </el-pagination>
        <el-link  v-if="resultList.length > 0" type="info" :underline="false">*此数据来源于天眼查官方网站</el-link>
        <!-- 四库一平台，业绩详情 弹窗 -->
        <el-dialog title="工程项目详情" :visible.sync="dialogYejiVisible">
            <div class="titleBase">基本信息</div>
            <div class="data-content">
                <table class="table -striped-col">
                    <tbody>
                        <tr>
                            <td class="" width="164px">项目名称</td>
                            <td colspan="3">{{ yejiDetail.proName }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">项目类别</td>
                            <td width="272px">{{ yejiDetail.proType }}</td>
                            <td class="" width="164px">项目属地</td>
                            <td width="272px">{{ yejiDetail.base }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">项目编号</td>
                            <td width="272px">{{ yejiDetail.proNum }}</td>
                            <td class="" width="164px">省级项目编号</td>
                            <td width="272px">{{ yejiDetail.provinceProNum }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">建设单位</td>
                            <td width="272px">{{ yejiDetail.buildCompany }}</td>
                            <td class="" width="164px">建设单位组织机构代码 （统一社会信用代码）</td>
                            <td width="272px">{{ yejiDetail.buildCompanyId }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">建设性质</td>
                            <td width="272px">{{ yejiDetail.type }}</td>
                            <td class="" width="164px">工程用途</td>
                            <td width="272px">{{ yejiDetail.proUse }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">立项级别</td>
                            <td width="272px">{{ yejiDetail.projectLevel }}</td>
                            <td class="" width="164px">总投资</td>
                            <td width="272px">{{ yejiDetail.totalInvestment }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">总面积</td>
                            <td width="272px">{{ yejiDetail.type }}</td>
                            <td class="" width="164px">立项文号</td>
                            <td width="272px">{{ yejiDetail.certificateNum }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="titleBase">合同备案</div>
            <div class="data-content" v-for="(item, index) in detailList" :key="index">
                <table class="table -striped-col">
                    <tbody>
                        <tr>
                            <td class="" width="164px">合同类别</td>
                            <td width="272px">{{ item.contractCategory }}</td>
                            <td class="" width="164px">合同金额</td>
                            <td width="272px">{{ item.contractAmount }}</td>
                        </tr>
                        <tr>
                            <td class="">合同签订日期</td>
                            <td>{{ item.contractSigningDate }}</td>
                            <td class="">合同备案编号</td>
                            <td>{{ item.contractCecordNo }}</td>
                        </tr>
                        <tr>
                            <td class="" width="164px">省级合同备案编号</td>
                            <td colspan="3">{{ item.provincialContractCecordNo }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        companyName: {
            type: String,
            default: ''
        },
        projectId: {
            type: String,
            default: ''
        },
        navName: {
            type: String,
            default: "",
        },
    },
    data: () => ({
        resultList: [],
        pageNum: 1,
        pageSize: 10,
        total: null,
        dialogYejiVisible: false,
        yejiDetail: {},
        detailList:[],
    }),
    methods: {
        handleSizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.getResultList()
        },
        handleCurrentChange: function(pageNum){
            this.pageNum = pageNum;
            this.getResultList()
        },
       
        // 获取 四库一平台业绩 列表
        getResultList: function () {
            // const loading = this.$loading({
            //     lock: true,//lock的修改符--默认是false
            //     text: 'Loading',//显示在加载图标下方的加载文案
            //     spinner: 'el-icon-loading',//自定义加载图标类名
            //     background: 'rgba(0, 0, 0, 0.5)',//遮罩层颜色
            //     // target: document.querySelector('#table')//loadin覆盖的dom元素节点
            // });
            var that = this;
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.searchUrl}/searchtianyan/project`,
                data: {
                    corpName: this.companyName,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    projectId: this.projectId,
                },
                callback: function (data, res) {
                    // loading.close()
                    if( data.result ) {
                        that.resultList = data.result.items;
                        that.total = data.result.total;
                    }
                },
            });
        },
        toYejiInfo: function(businessId) {
            var that = this;
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.searchUrl}/searchtianyan/project/detail`,
                data: {
                    businessId: businessId,
                    projectId: this.projectId,
                },
                callback: function (data, res) {
                    if(data.result){
                        that.yejiDetail = data.result
                        that.detailList = data.result.contractFiling.result
                        that.dialogYejiVisible = true;
                        that.$emit('pushValidNames',that.navName)
                    }
                    
                },
            });
        }
    },
    mounted() {
        this.getResultList()
    },
};
</script>

<style scoped lang="scss">
.company-right table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    ::v-deep tr th {
        background: #f1f7fd;
        color: #236ac4;
        font-weight: 400;
        padding: 10px 0;
        text-align: center;
        border: 1px solid #a4bee3;
    }
    ::v-deep td {
        border: 1px solid #a4bee3;
        padding: 10px 0px;
        font-size: 14px;
    }
    ::v-deep #commonClass {
        background: #4396de;
        color: #fff;
        font-size: 16px;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    ::v-deep td:nth-child(odd) {
        text-align: center;
    }
    ::v-deep td:nth-child(even) {
        text-align: center;
    }
}
.company_tabs {
    margin: 0 15px;
    background: #206bc6;
    margin-top: 10px;
    ::v-deep span {
        display: inline-block;
        text-align: center;
        height: 36px;
        line-height: 36px;
        color: #fff;
        padding: 0px 20px;
        background: #206bc6;
        font-size: 15px;
    }
    ::v-deep .active {
        text-decoration: none;
        background: #4396de;
        box-sizing: border-box;
        border-bottom: 2px solid #eea108;
    }
}
</style>
